<template>
<ContainerBox type="common" v-if="show" class="question-detail">
  <div class="detail">
    <h3>问题详情：</h3>
    <div class="txt">{{title}}</div>
  </div>
  <div class="info">
    <div class="author">发布者：{{nickname}}</div>
    <div class="view">浏览量：{{viewCount}}</div>
  </div>
  <div class="shots" v-if="shots.length!==0">
    <h4 style="position: absolute;top: -50px;left: -20px">问题截图：</h4>
    <div class="pic-container" v-for="(item,index) in shots" >
      <img :src="item" >
    </div>
  </div>
  <h3>回答：</h3>
  <ContainerBox type="primary" class="answer">
    {{answer}}
  </ContainerBox>
  <div class="back-btn" @click="$emit('back')">返回</div>
</ContainerBox>
</template>

<script>
import ContainerBox from '../../../box/container_box';
export default {
  name: "skill_page_questions_detail",
  data() {
    return {
      title: "",
      nickname: "",
      viewCount: "",
      answer: "",
      shots: []
    }
  },
  components: {ContainerBox},
  /*mounted() {
    this.getQuestionsDetail();
  },*/
  props: ["show"],
  methods: {
    getQuestionsDetail: function (questionId) {
      const self = this;
      this.$axios({
        method: 'get',
        url: '/skill/question/get/' + questionId
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log("jsonObj", jsonObj);
        if (jsonObj.success){
          self.title = jsonObj.data.VO.title;
          self.nickname = jsonObj.data.VO.nickname;
          self.viewCount = jsonObj.data.VO.viewCount;
          self.answer = jsonObj.data.VO.answer;
          self.shots = jsonObj.data.VO.pictureList;
        } else {
          // 异常跳转
        }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../.././assets/style/common";
.question-detail {
  position: relative;
  .detail {
    .txt {
      margin-top: 10px;
      width:100%;
      background-color: #f1f1f1;
      box-sizing: border-box;
      padding: 10px;
      min-height: 100px;
      border-radius: 10px;
    }
  }
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 400px;
    color: #888;
    margin-top: 10px;
    margin-bottom: 50px;
  }
  .shots {
    position: relative;
    margin-top: 35px;
    margin-left: 20px;
    display: flex;
    height: 200px;
    .pic-container {
      position: relative;
      margin-right: 25px;

      img {
        width: 180px;
        height: 180px;
        border-radius: 5%;
      }
    }
  }
  .answer {
    width: 100%;
    min-height: 50px;
    max-height: 300px;
    overflow: auto;
    white-space: normal;
    margin-bottom: 20px;
  }
  .back-btn {
    top: 20px;
    right: 20px;
    position: absolute;
    width: 10%;
    margin-left: 700px;
    @include btn_back();
  }
}
</style>
